<template>
  <Card :bordered="false" dis-hover>
    <Row
      :gutter="12"
      class="ivu-mb-16"
      v-hasC="{
        name: 'v1-active-active-backend-list',
        flag: 'v1/active/active/backend-list',
      }"
    >
      <Col :span="6">
        <Input
          placeholder="请输入搜索视频名称"
          v-model="params.title"
          @on-clear="askData"
          @on-enter="askData"
          clearable
        />
      </Col>
      <Col :span="3">
        <Select
          placeholder="类别"
          v-model="params.video_type_id"
          @on-change="askData"
          clearable
        >
          <Option
            v-for="(item, index) in typeList"
            :value="+item.value"
            :key="index"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col :span="3">
        <Select
          placeholder="状态"
          v-model="params.status"
          @on-change="askData"
          clearable
        >
          <Option
            v-for="(item, index) in activeStatus"
            :value="index"
            :key="index"
            >{{ item }}</Option
          >
        </Select>
      </Col>
      <Col class="ivu-fr" :span="2" offset="10">
        <Button
          type="primary"
          @click="handleAdd"
          v-hasC="{
            name: 'v1-active-active-create',
            flag: 'v1/active/active/create',
          }"
          >新增</Button
        >
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      v-hasC="{
        name: 'v1-active-active-backend-list',
        flag: 'v1/active/active/backend-list',
      }"
    >
      <template #image="{ row }">
        <img :src="row.cover_img" style="width: 80px; height: 40px"  @click="seeBIg(row.cover_img)"/>
      </template>
      <template #status="{ row }">
        <Badge v-if="row.status == 0" status="warning" text="停用" />
        <Badge v-else status="processing" text="正常" />
      </template>
      <template #tag="{ row }">
        <Tag color="primary">{{
          row.type_str
        }}</Tag>
      </template>
      <template #activitiesTime="{ row }">
        {{ row.start_time }} ~ {{ row.end_time }}
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-active-active-update',
            flag: 'v1/active/active/update',
          }"
          >编辑</a
        >
        <Divider type="vertical"></Divider>
        <a
          @click="handleDelete(row)"
          class="delete"
          v-hasC="{
            name: 'v1-active-active-delete',
            flag: 'v1/active/active/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      v-model="params.page"
      :page-size="params.pageSize"
      :page-size-opts="pageOpts"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
      v-hasC="{
        name: 'v1-active-active-backend-list',
        flag: 'v1/active/active/backend-list',
      }"
    />
    <Modal
      :title="add ? '新增' : '编辑'"
      width="1180"
      v-model="articleModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
      @on-visible-change="$refs.activeChange.resetForm()"
    >
      <updateVideo
        :editorType="add"
        ref="activeChange"
        @refresh="refreshData"
        :typelist="typeList"
      />
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button
          :loading="subloading"
          type="primary"
          @click="sendData"
          class="ivu-ml-16"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal v-model="imgModel" footer-hide>
      <p slot="header">查看大图</p>
      <img :src="src" style="width: 100%; object-fit: cover" />
    </Modal>
  </Card>
</template>
<script>
import { videobackendList, videoDelete } from '@/api/video'
import updateVideo from './components/updateVideo.vue'
export default {
  name: 'nameList',
  components: { updateVideo },
  data () {
    return {
      add: true,
      total: 0,
      articleModal: false,
      current: 1,
      pageOpts: [10, 15, 20, 30, 50],
      typeList: [],
      activeStatus: [],
      subloading: false,
      params: {
        current: 1,
        pageSize: 10,
        title: '',
        video_type_id: '',
        status: '',
        sort_column: '',
        sort_value: '',
      },
      columns: [
        {
          title: 'id',
          key: 'id',
          width: 65
        },
        {
          title: '标题名称',
          key: 'title',
          minWidth: 168
        },
        {
          title: '类别',
          slot: 'tag',
          width: 158,
          tooltip: true
        },
        {
          title: '封面图',
          slot: 'image',
          width: 100
        },
        {
          title: '视频ID',
          key: 'video_id',
          minWidth: 168
        },
        {
          title: '排序',
          key: 'sort',
          width: 80,
          sortable: 'column'
        },
        {
          title: '状态',
          slot: 'status',
          width: 90
        },
        {
          title: "创建时间",
          key: 'created_at',
          width: 165,
          sortable: 'column'
        },
        {
          title: '操作',
          slot: 'action',
          width: 118,
          fixed: 'right'
        }
      ],
      list: [],
      loading: false,
      videoId: '',
      src:'',
      imgModel: false
    }
  },
  methods: {
    sortChange ({ key, order }) {
      this.params.sort_value = order
      this.params.sort_column = key
      this.getData()
    },
    askData(){
      this.params.page=1
      this.getData()
    },
    getData () {
      const params = this.params
      this.loading = true
      videobackendList(params).then(res => {
        this.activeStatus = res.condition.status
        this.typeList = res.condition.type
        this.list = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    refreshData (e) {
      this.articleModal = e
      this.getData()
    },
    sendData () {
      this.$refs.activeChange.saveData()
    },
    canceledit () {
      this.articleModal = false
    },
    timeChange (e) {
      this.params.start_time = e[0]
      this.params.end_time = e[1]
      this.askData()
    },
    formSize (e) {
      this.current = e
      this.params.page = e
      this.getData()
    },
    formChangePage (e) {
      this.params.pageSize = e
      this.askData()
    },
    handleAdd () {
      this.add = true
      this.articleModal = true
      this.$refs.activeChange.infoData(0)
    },
    handleEdit (row) {
      this.add = false
      this.articleModal = true
      this.videoId = row.id
      this.$refs.activeChange.infoData(row.id)
    },
    seeBIg (item) {
      this.src = item
      this.imgModel = true
    },
    handleDelete (row) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确定删除此项?',
        onOk: () => {
          videoDelete({ id: row.id }).then(res => {
            this.$Message.success('删除成功！')
            this.askData()
          })

        }
      })
    }

  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
